import {Triangles} from './jsx/allLiveEditors'

# Triangles

`<Triangles />` renders a list of triangles.

## Props

| Name       | Type         | Default | Description                         |
| ---------- | ------------ | ------- | ----------------------------------- |
| `children` | `Triangle[]` | `[]`    | array of Triangle markers to render |

### Triangle

```js
type Color =  {
  r: number, // between 0 and 1
  g: number, // between 0 and 1
  b: number, // between 0 and 1
  a: number, // between 0 and 1
}

type Triangle = {
  id?: number, // positive integer
  pose: {
    position: { x: number, y: number, z: number },
    orientation: { x: number, y: number, z: number, w: number }
  }
  scale: {
    x: number,
    y: number,
    z: number,
  },
  color: Color,
  colors?: Color[],
  points: [{ x: number, y: number, z: number }]
  // Pass true to not render the triangles to the screen - just the hitmap.
  // This can be used to render the interior of a group of lines as transparent during normal rendering, but as 
  // clickable for hitmap purposes.
  onlyRenderInHitmap?: boolean,
}
```

<Triangles />
